<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>使用 CSS3 box-sizing 属性</title>
    <style>
        /* CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。 */
        /* 如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中: */

        /* 以下是两个 <div> 元素添加 box-sizing: border-box; 属性的简单实例。 */
        .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            box-sizing: border-box;
        }

        .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
            box-sizing: border-box;
        }

        /* 从结果上看 box-sizing: border-box; 效果更好，也正是很多开发人员需要的效果。 */
        /* 以下代码可以让所有元素以更直观的方式展示大小。很多浏览器已经支持 box-sizing: border-box; (但是并非所有 - 这就是为什么 input 和 text 元素设置了 width: 100%; 后的宽度却不一样)。 */
        /* 所有元素使用 box-sizing 是比较推荐的： */
        /* 

        * {
            box-sizing: border-box;
        } 
        
        */
    </style>
</head>

<body>

    <div class="div1">两个 div 现在是一样大小的!</div>
    <br>
    <div class="div2">菜鸟教程!</div>

</body>

</html>